<template>
    <div>
        <KnHeader></KnHeader>
        <el-row :gutter="20" class="card-container">
            <!-- 卡片1 -->
            <el-col :span="8" class="card-item">
                <el-card class="box-card">
                    <div slot="header" class="clearfix card-header">
                        <span class="card-title">总阅读量</span>
                        <el-button style="float: right; padding: 3px 0" type="text" class="action-btn">
                            <i class="el-icon-view"></i>
                        </el-button>
                    </div>
                    <div class="card-content">
                        <div class="text item">
                            {{ EbookSnapshot.viewCount }}
                        </div>
                    </div>
                </el-card>
            </el-col>

            <!-- 卡片2 -->
            <el-col :span="8" class="card-item">
                <el-card class="box-card">
                    <div slot="header" class="clearfix card-header">
                        <span class="card-title">总点赞量</span>
                        <el-button style="float: right; padding: 3px 0" type="text" class="action-btn">
                            <i class="el-icon-star-off"></i>
                        </el-button>
                    </div>
                    <div class="card-content">
                        <div class="text item">
                            {{ EbookSnapshot.voteCount }}

                        </div>
                    </div>
                </el-card>
            </el-col>

            <!-- 卡片3 -->
            <el-col :span="8" class="card-item">
                <el-card class="box-card">
                    <div slot="header" class="clearfix card-header">
                        <span class="card-title">总点赞率</span>
                        <el-button style="float: right; padding: 3px 0" type="text" class="action-btn">
                            <i class="el-icon-s-flag"></i>
                        </el-button>
                    </div>
                    <div class="card-content">
                        <div class="text item">
                            {{ (EbookSnapshot.totalDoc / EbookSnapshot.voteCount * 100).toFixed(2) }}%

                        </div>
                    </div>
                </el-card>
            </el-col>

<!--            &lt;!&ndash; 卡片4 &ndash;&gt;-->
<!--            <el-col :span="8" class="card-item">-->
<!--                <el-card class="box-card">-->
<!--                    <div slot="header" class="clearfix card-header">-->
<!--                        <span class="card-title">今日阅读</span>-->
<!--                        <el-button style="float: right; padding: 3px 0" type="text" class="action-btn">-->
<!--                            <i class="el-icon-view"></i>-->
<!--                        </el-button>-->
<!--                    </div>-->
<!--                    <div class="card-content">-->
<!--                        <div class="text item">-->
<!--                            {{ EbookSnapshot.viewIncrease }}-->

<!--                        </div>-->
<!--                    </div>-->
<!--                </el-card>-->
<!--            </el-col>-->

<!--            &lt;!&ndash; 卡片5 &ndash;&gt;-->
<!--            <el-col :span="8" class="card-item">-->
<!--                <el-card class="box-card">-->
<!--                    <div slot="header" class="clearfix card-header">-->
<!--                        <span class="card-title">今日点赞</span>-->
<!--                        <el-button style="float: right; padding: 3px 0" type="text" class="action-btn">-->
<!--                            <i class="el-icon-s-flag"></i>-->
<!--                        </el-button>-->
<!--                    </div>-->
<!--                    <div class="card-content">-->
<!--                        <div class="text item">-->
<!--                            {{ EbookSnapshot.voteIncrease }}-->

<!--                        </div>-->
<!--                    </div>-->
<!--                </el-card>-->
<!--            </el-col>-->
        </el-row>
        <el-row :gutter="20" class="chart-container">
            <el-col :span="12" class="chart-item">
                <div ref="chart" style="width: 100%; height: 400px;"></div>
            </el-col>
            <el-col :span="12" class="chart-item">
                <div ref="chart2" style="width: 100%; height: 400px;"></div>

            </el-col>
        </el-row>
    </div>
</template>

<script>
import KnHeader from '@/components/KnHeader.vue'
import { getEbookSnapshots,getEbookSnapshotsCharts } from '../apis/ebookSnapshotApi'
export default {
    //import引入组件才能使用
    components: {
        KnHeader
    },
    props: {},
    data() {
        return {
            EbookSnapshot: {},
            next7Days:[],
            next7DaysViewCount:[],
            next7DaysVoteCount:[]
        };
    },
    // 计算属性
    computed: {},
    created() {
        this.getEbookSnapshots()
        // this.next7Days = this.getNext7Days()


    },
    mounted() {
        this.getCharts()

        // this.initChart()
    },
    // 方法集合
    methods: {
        getNext7Days() {
            const today = new Date();
            const dates = [];
            for (let i = 0; i < 7; i++) {
                const date = new Date(today);
                date.setDate(today.getDate() + i);
                dates.push(this.formatDate(date));
            }
            return dates;
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        async getEbookSnapshots() {
            let res = await getEbookSnapshots()
            if (res.data.status === 200) {
                this.EbookSnapshot = res.data.data
                console.log(this.EbookSnapshot);
            } else {
                this.$message.error(res.data.message)
            }

        },
        async getCharts (){
            let res = await getEbookSnapshotsCharts()
            console.log("indexVUe 166 res====>",res);
            let viewCountList = []
            let voteCountList = []
            if(res.data.status===200){
               for(let i = 0;i<res.data.data.length;i++){
                viewCountList.push(res.data.data[i]?res.data.data[i].viewCount:0)
                voteCountList.push(res.data.data[i]?res.data.data[i].voteCount:0)
                this.next7Days.push(res.data.data[i]?res.data.data[i].date:0)
               }
            }
            this.next7DaysViewCount = viewCountList
            this.next7DaysVoteCount = voteCountList
            this.initChart()
        },
       
        initChart() {
            let me = this
            
            let myChart = this.$echarts.init(this.$refs.chart)
            var option = {
                title: {
                    text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['每日阅读量','每日点赞量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: me.next7Days
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '每日阅读量',
                        type: 'line',
                        stack: 'Total',
                        data: me.next7DaysViewCount
                    },
                    {
                        name: '每日点赞量',
                        type: 'line',
                        stack: 'Total',
                        data: me.next7DaysVoteCount
                    }
                ]
            }
            myChart.setOption(option);
            let myChart2 = this.$echarts.init(this.$refs.chart2)
            var option2 = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ]
                    }
                ]
            };
            myChart2.setOption(option2);
        }
    },
}
</script>

<style scoped>
/* 容器样式 */
.card-container {
    margin: 20px 0;
}

/* 卡片项样式 */
.card-item {
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 卡片头部样式 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
}

/* 操作按钮样式 */
.action-btn {
    color: #909399;
    transition: color 0.3s ease;
}

.action-btn:hover {
    color: #409EFF;
}

/* 卡片内容样式 */
.card-content {
    padding: 10px 0;
}

.text.item {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #606266;
}
</style>